<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>循环指令 v-for</h1>
			<h2>1. 遍历数组</h2>
			<div v-for="(item,i) in arr" :key="i">
				索引:{{i}} --> 值 {{item}}
			</div>
			
			<h2>2. 遍历对象数组</h2>
			<div v-for="(stu,i) in stus" :key="stu.id">
				索引:{{i}} --> 值 {{stu.id}},{{stu.name}},{{stu.age}}
			</div>
			
			<h2>3. 遍历对象</h2>
			<div v-for="(val,key,i) in obj" :key="i">
				索引:{{i}} --> 值 {{key}},{{val}}
			</div>
			
			<h2>4. 遍历数字</h2>
			<div v-for="(item,i) in 10" :key="i">
				{{i}} --{{item}}
			</div>
			
			<h2>例子</h2>
			<ul>
				<li v-for="(p,i) in persons" :key="p.id">
					<input type="checkbox" />{{p.name}}
				</li>
			</ul>
			<input type="text" v-model="name" />
			<input type="button" value="添加" @click="add"/>
		</div>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						arr:["张三","李四","王五"],
						stus:[
							{
								id:1001,
								name:"张三",
								age:18
							},
							{
								id:1002,
								name:"李四",
								age:19
							},
							{
								id:1003,
								name:"王五",
								age:18
							}
						],
						obj:{
							id:1004,
							name:"刘备",
							age:40
						},
						
						count:2,
						persons:[
							{id:1,name:"张三"},
							{id:2,name:"李四"}
						],
						name:"",
					}
				},
				methods:{
					
					add()
					{
						// 创建一个person
						var newP = {
							id:++this.count,
							name:this.name
						}
						// 放入persons前面
						this.persons.unshift(newP);
						// 放入persons末尾
						// this.persons.push(newP);
						this.name = "";
					}
				}
			})
			vm.mount("#app");
		</script>
	</body>
</html>
